<template>
  <div class="root">
    <Navbar class="navbar"></Navbar>
    <Layout class="layout"></Layout>
  </div>
</template>
<script>
import Navbar from './components/Navbar.vue'
import Layout from './components/Layout.vue'

export default {
  components: {
    Navbar,
    Layout
  }
}
</script>
<style>
* {
  margin: 0;
  padding: 0;
}

.root {
  display: flex;
  height: 100vh;
  /* 改变主轴方向为竖直方向，竖直排列 */
  flex-direction: column;
}

.navbar {
  height: 50px;
}

.layout {
  /* layout占满剩余部分 */
  flex: 1;
  display: flex;
}
</style>